<template>
  <div class="wu_table">
    <el-table :data="displayTableData" stripe
              v-loading="loading"
              :border="isBorder"
              :row-class-name="tableRowClassName"
              :header-cell-style="option.headerCell"
              :cell-style="finalCellStyle"
              :style="{ width:option.width?option.width:'100%' }">

      <el-table-column type="expand" v-if="extendType">
        <template slot-scope="props">
          <slot name="extendSlot" :row="props.row"></slot>
        </template>
      </el-table-column>

      <el-table-column v-if="col.status != '-1'" v-for="(col, index) in tableHeader" :key="index"
                       :prop="col.columnName"
                       :label="col.coloumNameCn"
                        :width="col.width"
                       :min-width="col.minWidth"
      >
        <el-table-column v-if="col.children && col.children.length > 0"
                         v-for="(cc, cIndex) in col.children" :key="cIndex"
                         :prop="cc.columnName"
                         :label="cc.coloumNameCn"
                         :min-width="cc.minWidth"
                         v-show="cc.status !=-1"
        >
          <template slot-scope="scope">
            <span v-if="!cc.tag">{{scope.row[cc.columnName]}}</span>
            <el-tag v-if="cc.tag" size="mini">{{ handleStatus(scope.row[cc.columnName],cc.columnName )}}</el-tag>
          </template>
        </el-table-column>
        <template slot-scope="scope">
          <span v-if="col.type == 'file'" title="预览" style="cursor:pointer;" @click="showPdf(scope.row[col.columnName])"><i class="fa fa-file-o" aria-hidden="true" v-show="scope.row[col.columnName]"></i></span>
          <span v-else-if="!col.tag" :title="scope.row[col.columnName]">{{scope.row[col.columnName]}}{{col.columnName=='maintainPeriod'?"次/年":""}}</span>
          <el-tag v-else-if="col.tag" :type="getStatusType(scope.row[col.columnName],col.columnName)" size="mini">{{
            handleStatus(scope.row[col.columnName],col.columnName)}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" v-if="option.showOperate">
        <template slot-scope="scope">
          <slot :index="scope.$index" :rowData="scope.row" :num="pageNum" :row="pageRow" name="operate">
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="filterPage&&totalCount > 0 &&!loading" background style="text-align: right;margin-top: 10px"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="pageNum"
                   :page-size="pageRow"
                   :total="totalCount"
                   prev-text="上一页"
                   next-text="下一页"
                   :page-sizes="[10, 20, 50, 100,500]"
                   layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    name: 'wuTable',
    props: {
      tableData: {
        default: function () {
          return []
        },
        type: Array
      },
      tableHeader: {
        default: function () {
          return []
        },
        type: Array
      },
      option: {
        default: function () {
          return {}
        },
        type: Object
      },
      backCount: {
        default: function () {
          return 0;
        },
        type: Number
      },
      isMultipleSelection: {
        default: function () {
          return false
        },
        type: Boolean
      },
      tableLoading: {
        default: function () {
          return true
        },
        type: Boolean
      },
      isBorder: {
        default: function () {
          return true
        },
        type: Boolean
      },
      headerFix: {
        default: function () {
          return false
        },
        type: Boolean
      },
      isStrip: {
        default: function () {
          return false
        },
        type: Boolean
      },
      extendType: {
        default: function () {
          return false
        },
        type: Boolean
      },
      filterPage: {
        default: function () {
          return true
        },
        type: Boolean
      },
    },
    data() {
      return {
        displayTableData: [],
        copyTableData: [],
        //是否开启复选框 默认不开启
        isOpenMultipleSelection: this.isMultipleSelection,
        //复选框选择的数据
        multipleSelection: [],
        //分页总数
        totalCount: 0,
        //开始页
        pageNum: 1,
        //每页显示条数
        pageRow: 20,
        loading: true,
        statusMap: {
          gzStatus: {
            "0": {name: "正常", type: "normal"},
            "1": {name: "待保养", type: "by_willing"},
            "2": {name: "保养中", type: "by"},
            "3": {name: "过保", type: "by_done"},
            "4": {name: "待维修", type: "wx_willing"},
            "5": {name: "维修中", type: "wx"},
            "6": {name: "申请报废", type: "bf_willing"},
            "7": {name: "停用", type: "stop"},
            "8": {name: "保养完毕", type: "over"},
            "9": {name: "维修完毕", type: "over"},
            "10": {name: "已报废", type: "dump"},
          },
          useStatus: {
          	"0": {name:"在库",type:"stay"},
          	"1": {name:"出库",type:"by"},
          },
          tStatus:{
            "0": {name: "良好", type: "normal"},
            "1": {name: "堵塞", type: "stop"},
            "2": {name: "保留", type: "by"},
            "3": {name: "废弃", type: "fq"},
          },
          spStatus:{
            "0": {name: "待处理", type: "by_done"},
            "1": {name: "已处理", type: "normal"},
          },
          deviceStatus:{
            "0": {name: "在用", type: "normal"},
            "1": {name: "备用", type: "stop"},
            "2": {name: "报废中", type: "by"},
            "3": {name: "已报废", type: "wx"},
          },
          wbStatus:{
            "0": {name: "正常", type: "normal"},
            "1": {name: "保养", type: "by_willing"},
            "2": {name: "过保", type: "by_done"},
            "3": {name: "维修", type: "wx"},
            "4": {name: "保养完毕", type: "over"},
            "5": {name: "维修完毕", type: "over"},
          },
          type:{
            "0": {name: "入库", type: "normal"},
            "1": {name: "出库", type: "by_willing"},
          }
        }
      }
    },
    methods: {
      showPdf(rowData){
        this.$emit("showPdf",rowData);
      },
      handleStatus(val, column) {
        let map = this.statusMap[column];
        return map[val] ? map[val].name : "";
      },
      getStatusType(val, column){
        let map = this.statusMap[column];
        return map[val] ? map[val].type : "";
      },
      handleSizeChange(val) {
        //改变每页数量
        this.pageRow = val;
        this.handleFilter();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.refreshTable();
      },
      handleFilter() {
        //查询事件
        this.pageNum = 1;
        this.refreshTable()
      },
      getIndex($index) {
        return (this.pageNum - 1) * this.pageRow + $index + 1
      },
      refreshTable() {
        let start = this.pageRow * (this.pageNum - 1);
        let end = this.pageRow * this.pageNum;
        if (this.backCount == 0) {
          this.displayTableData = this.copyTableData.slice(start, end);
        } else {
          this.$emit(
            "getBackData",
            this.pageRow * (this.pageNum - 1),
            this.pageRow
          );
        }

      },
      tableRowClassName({row, rowIndex}) {
        if(this.isStrip){
           if(rowIndex%2==1){
             return "success-row";
           }
           return "";
        }else if(row.color){
          return 'lastColor';
        }
        return 'noLastColor';
      },
      finalCellStyle({row, column, rowIndex, columnIndex}){
        let key = column.property;
        let color = {background: '',color:"",borderBottom: ""};
        if(key == "useStatusCn"){
          let userStatus = row.useStatus;
          if(userStatus == 0){
            color.background = "#e1f3d8";
            color.color = "#67C23A";
            color.borderBottom = "1px solid #f5f5f5";
          }
          if(userStatus == 1){
            color.background = "#fde2e2";
            color.color = "#F56C6C";
            color.borderBottom = "1px solid #f5f5f5";
          }
          if(!userStatus){
            // color.background = "#e9e9eb";
            color.color = "#afafaf";
          }
        }
        if(key == "gzStatusCn"){
          let gzStatus = row.gzStatus;
          if(gzStatus == 1){
            color.background = "#c6daef";
            color.color = "#3a8ee6";
            color.borderBottom = "1px solid #f5f5f5";
          }
          if(gzStatus == 2){
            color.background = "#c1c1f7";
            color.color = "#ffffff";
            color.borderBottom = "1px solid #f5f5f5";
          }
          if(gzStatus == 3){
            color.background = "#faecd8";
            color.color = "#E6A23C";
            color.borderBottom = "1px solid #f5f5f5";
          }
          if(gzStatus == 4 ||gzStatus == 5||gzStatus == 6 ||gzStatus == 7||gzStatus == 10){
            color.background = "#f75555";
            color.color = "#ffffff";
            color.borderBottom = "1px solid #f5f5f5";
          }
        }
        return color;
      }
    },
    watch: {
      tableData(val) {
        if (this.backCount == 0) {
          this.displayTableData = this.filterPage?(val.slice(0, this.pageNum * this.pageRow)):JSON.parse(JSON.stringify(val));
          this.totalCount = val ? val.length : 0;
        } else {
          this.displayTableData = val;
          this.totalCount = this.backCount;
        }
        this.copyTableData = JSON.parse(JSON.stringify(val));
        if (!(this.backCount > 0 && this.pageNum != 1)) {
          this.pageNum = 1;
        }
      },
      tableLoading(val) {
        this.loading = val;
      }
    }
  }
</script>
<style>
  .el-table .lastColor {
    text-align: center;
    background: rgba(199, 239, 198, 0.74);
    border-bottom: 1px solid #ffffff;
  }
  .el-table .noLastColor {
    background: #F2F2F2;
    text-align: center;
    border-bottom: 1px solid #ffffff;
  }
  .el-table--medium td, .el-table--medium th {
    padding: 4px 0 ;
  }
  .wu_table thead .cell {
    font-size: 12px ;
  }
  .wu_table .cell {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .el-table .success-row {
    background: #e0e9f98c
  }
  .el-select-dropdown.el-popper{
    min-width: 110px !important;
  }
  .el-select-dropdown__item{
    font-size: 12px;
  }
  .el-tag {
  	background-color: rgba(152, 203, 255, 0.1);
  }
  .el-tag--normal {
    border-color: rgba(152, 203, 255, 0.1);
    color: #409EFF;
  }
  .el-tag--by_willing {
    background-color: #fff5e3;
    border-color: #fff5e3;
    color: #eea010;
  }
  .el-tag--by {
    background-color: #fff5e3;
    border-color: #fff5e3;
    color: #ecad36;
  }
  .el-tag--by_done {
    background-color: #f9e6e5;
    border-color: #f9e6e5;
    color: #ec3e36;
  }
  .el-tag--wx_willing {
    background-color: #f9e6e5;
    border-color: #f9e6e5;
    color: #f5736d;
  }
  .el-tag--wx {
    background-color: #e1ffe1;
    border-color: #e1ffe1;
    color: #79ec3e;
  }
  .el-tag--bf_willing {
    background-color: #f9e6e5;
    border-color: #f9e6e5;
    color: #f9053e;
  }
  .el-tag--stop {
    background-color: #f2ecfb;
    border-color: #f2ecfb;
    color: #7527f3;
  }
  .el-tag--over {
    background-color: #e6edff;
    border-color: #e6edff;
    color: #275cf3;
  }
  .el-tag--dump {
    background-color: #f1f5ff;
    border-color: #f1f5ff;
    color: #a1a3a9;
  }
  .el-tag--stay {
    background-color: #e1ffe1;
    border-color: #e1ffe1;
    color: #3bbf3b;
  }
  .el-tag--fq {
    background-color: #e6edff;
    border-color: #e6edff;
    color: #949593;
  }
</style>
